/**
 * 腾讯地图开放平台：
 *  https://lbs.qq.com/
 * 入口使用：
 *  1. 注册登录（公司的话，使用企业账号）
 *  2. 控制台，创建应用，添加key
 *  3. 页面放置一个 地图容器
 *  4. 引入JSSDK，就是一段 script, https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77 PS: 注意修改 key 的参数
 *  5. 使用 全局的 TMap 对象来创建地图实例
 */

import { Component, createRef } from "react";

export default class MapBasic extends Component {
  boxRef = createRef<HTMLDivElement>();

  render() {
    return (
      <div>
        <h2>地图基础</h2>

        <div
          ref={this.boxRef}
          style={{ height: 400, width: "100%", border: "1px solid #000" }}
        ></div>
      </div>
    );
  }

  componentDidMount(): void {
    const map = new TMap.Map(this.boxRef.current, {
      center: [22.626199, 113.838053], // 地图中心点坐标
      zoom: 18,
    });
  }
}
